<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text" name="username"><br />
    <input type="password" name="pwd"><br />
    <input type="radio" name="sex" value="nan">
    <input type="radio" name="sex" value="nv"><br />

    <button>提交</button>
  </form>

  <script>
    // 表单提交的时候，阻止默认行为，收集表单数据，Ajax提交这些数据
    document.querySelector('form').onsubmit = function (e) {
      e.preventDefault();
      // 收集数据
      let fd = new FormData(this);
      fd.append('haha', 'hehe');
      fd.set('username', 'laowang')
      // ajax提交
      let xhr = new XMLHttpRequest();
      xhr.onload = function () {
        let res = JSON.parse(xhr.responseText);
        console.log(res);
      }
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
      xhr.send(fd);
    }


    /*
    GET方式的参数有两种写法，其中一种就是 查询字符串格式，另一种还没有讲

    POST方式的请求体有三种写法：分别是 查询字符串、JSON、FormData
    // 查询字符串格式 对应的Content-Type: application/x-www-form-urlencoded ---- 需要手动指定
    // JSON格式 对应的Content-Type: application/json  ---- 需要手动指定
    // FormData格式 对应的Content-Type: multipart/form-data; WebKitssdlklkdsASDFsdsdds ---- 不需要自己指定，浏览器会自动添加
    */
  </script>
</body>

</html>